﻿KISSY.add("fgt/ui/imggallary", function (S, Overlay) {
    function ImgGallary(config) {
        this._init(config || {});
    }

    S.augment(ImgGallary, {
        _init: function (config) {
            var self = this;

            self.config = S.merge(
            {
                titleCls: "title",
                prevPanelCls: "prev-panel",
                nextPanelCls: "next-panel",
                prevArrowCls: "prev-arrow",
                nextArrowCls: "next-arrow",
                imgPanelCls: "img-panel",
                imgWidth: 524,
                imgHeight: 393,
                boxWidth: 536
            }, config);

            if (!S.isArray(self.config.data)) {
                S.log("请配置正确的data.", "error");
                return;
            }

            self.box = new Overlay({
                prefixCls: "fgt-",
                srcNode: self.config.containerID,
                elStyle: { position: S.UA.ie == 6 ? "absolute" : "fixed" },
                closable: true,
                width: self.config.boxWidth,
                mask: true,
                draggable: false,
                zIndex: 999999
            });

            self._isRendered = false;
            self.currentImgIndex = -1;
        },

        _bindEvent: function () {
            var self = this,
                box = self.box,
                All = S.all,
                contentEl = box.get("contentEl"),
                cfg = self.config;

            self.title = contentEl.all("." + cfg.titleCls);
            self.prevPanel = contentEl.all("." + cfg.prevPanelCls);
            self.nextPanel = contentEl.all("." + cfg.nextPanelCls);
            self.prevArrow = contentEl.all("." + cfg.prevArrowCls);
            self.nextArrow = contentEl.all("." + cfg.nextArrowCls);
            self.imgPanel = contentEl.all("." + cfg.imgPanelCls);

            self.prevPanel.on("mouseenter", function (event) {
                self.prevArrow.show();
            });

            self.prevPanel.on("mouseleave", function (event) {
                self.prevArrow.hide();
            });

            self.prevPanel.on("click", function (event) {
                var toIndex = self.currentImgIndex - 1;
                if (toIndex < 0 || toIndex >= self.config.data.length) {
                    return;
                }
                self._updateStatus(toIndex);
            });

            self.nextPanel.on("mouseenter", function (event) {
                self.nextArrow.show();
            });

            self.nextPanel.on("mouseleave", function (event) {
                self.nextArrow.hide();
            });

            self.nextPanel.on("click", function (event) {
                var toIndex = self.currentImgIndex + 1;
                if (toIndex < 0 || toIndex >= self.config.data.length) {
                    return;
                }
                self._updateStatus(toIndex);
            });
        },

        _updateStatus: function (currentIndexNum) {
            var self = this,
                cfg = self.config,
                data = cfg.data,
                currentImgData = data[currentIndexNum],
                displayIndex = currentIndexNum + 1;

            self.imgPanel.attr("src", CONFIG["downLoadImageServer"] + "/d/2/" + currentImgData.id + "(" + cfg.imgWidth + "x" + cfg.imgHeight + ")" + ".jpg");
            self.imgPanel.attr("alt", currentImgData.name);
            self.title.text(currentImgData.name + "(" + displayIndex + "/" + data.length + ")");
            self.currentImgIndex = currentIndexNum;

            if (currentIndexNum > 0) {
                self.prevPanel.show();
            }
            else {
                self.prevPanel.hide();
                self.prevArrow.hide();
            }

            if (currentIndexNum < data.length - 1) {
                self.nextPanel.show();
            }
            else {
                self.nextPanel.hide();
                self.nextArrow.hide();
            }

        },

        show: function (index) {
            var self = this,
                box = self.box,
                cfg = self.config,
                data = cfg.data,
                indexNum = parseInt(index);

            if (indexNum < 0 || indexNum >= data.length) {
                return;
            }

            if (!self._isRendered) {
                box.render();
                self._bindEvent();
                self._isRendered = true;
            }
            self._updateStatus(indexNum);

            box.center();
            box.show();
        },

        hide: function () {
            this.box.hide();
        }
    });

    return ImgGallary;
}, {
    requires: ["overlay"]
});